<template>
    <view class="content">
        <u-form :model="formData" class="loginForm" ref="editPswFormRef" label-width="80" :rules="rules" labelPosition="left">
            <u-form-item label="原密码：" prop="password" borderBottom>
                <u-input v-model="formData.password" placeholder="请输入原密码" type="password" border="none" v-show="passwordFlag" />
                <u-input v-model="formData.password" placeholder="请输入原密码" type="text" border="none" v-show="!passwordFlag" />
                <u-icon :name="passwordFlag ? 'eye-off' : 'eye'" color="#999" size="20" @click="passwordFlag = !passwordFlag"></u-icon>
            </u-form-item>
            <u-form-item label="新密码：" prop="pass" borderBottom>
                <u-input v-model="formData.pass" placeholder="请输入新密码" type="password" border="none" v-show="passFlag" />
                <u-input v-model="formData.pass" placeholder="请输入新密码" type="text" border="none" v-show="!passFlag" />
                <u-icon :name="passFlag ? 'eye-off' : 'eye'" color="#999" size="20" @click="passFlag = !passFlag"></u-icon>
            </u-form-item>
            <u-form-item label="确认密码：" prop="checkPass" borderBottom>
                <u-input v-model="formData.checkPass" placeholder="请输入确认密码" type="password" border="none" v-show="checkPassFlag" />
                <u-input v-model="formData.checkPass" placeholder="请输入确认密码" type="text" border="none" v-show="!checkPassFlag" />
                <u-icon :name="checkPassFlag ? 'eye-off' : 'eye'" color="#999" size="20" @click="checkPassFlag = !checkPassFlag"></u-icon>
            </u-form-item>
        </u-form>
        <u-modal :show="show" content="修改成功,请重新登录!" @confirm="logOutShow" title="提示"></u-modal>
        <view class="mart-50">
            <u-button @click="commitMath" type="primary" size="default">提交</u-button>
        </view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            show: false,
            passwordFlag: true,
            passFlag: true,
            checkPassFlag: true,

            formData: {
                password: "",
                pass: "",
                checkPass: "",
            },
            rules: {
                password: [{ required: true, message: "请输入原密码", trigger: "blur" }],
                pass: [{ required: true, message: "请输入密码", trigger: "blur" }],
                checkPass: [{ required: true, message: "请输入确认密码", trigger: "blur" }],
            },
        };
    },
    methods: {
        commitMath() {
            this.$refs.editPswFormRef.validate().then(() => {
                if (this.formData.password == this.formData.pass) {
                    this.$u.toast("您输入的原密码和新密码相同，可以不用修改");
                    return false;
                }
                if (this.formData.checkPass != this.formData.pass) {
                    this.$u.toast("两次输入密码不一致");
                    return false;
                }
                this.$app.CallApi(this.$app.api.User.ChagePass(), {
                    data: {
                        oldPassword: this.formData.password,
                        newPassword: this.formData.pass,
                    },
                    success: (res) => {
                        this.show = true;
                    },
                });
            });
        },
        logOutShow() {
            uni.removeStorage({ key: this.$config.MeKey });
            uni.removeStorage({ key: this.$config.TokenKey });
            uni.reLaunch({
                url: "/pages/login/login",
            });
        },
    },
};
</script>

<style scoped></style>
